<!--
 * @Description: 
 * @Author: Zhangx
 * @Date: 2023-09-22 14:51:14
 * @LastEditors: Zhangx
 * @LastEditTime: 2023-09-22 17:34:00
-->
<template>
  <div class="custom-form">
    <el-form
    ref="formRef"
    :model="formData"
    class="elForm">
  <template v-for="(item,index) in formItems"
  :key="index">
  <!-- 标题 -->
  <template v-if="item.type === 'title'"></template>
</template>
  </el-form>
  </div>
  <!-- Dialog弹窗，表格组件，Form组件（富文本编辑器，树形结构，上传图片，上传文件） -->
  <!-- pdf查看，导出/下载；excel导入，导出 -->
  <!-- button插槽 -->
</template>

<script lang="ts" setup>
import {reactive} from 'vue'
const formData = reactive({})
const props = defineProps({
  formItems: { type: Array, required: true },
})
props.formItems.forEach((item, i) => {
  if (item.model) {
    formData[item.model as string] = item.defaultValue || ''

  }
})
</script>

<style lang="scss" scoped>
.custom-form {

  // display: flex;
  // align-items: center;
  // justify-content: space-between;
  // flex-wrap: wrap;
  .elForm {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .subTitle {
    width: 100%;
    display: flex;
    align-items: center;
    height: 50px;
    background: #F7F8FA;
    border-radius: 6px;
    margin: 30px 0;

    &:first-child {
      margin-top: 0;
    }

    .blueLine {
      width: 4px;
      height: 18px;
      background: #216FED;
      border-radius: 2px;
      margin-left: 30px;
      margin-right: 8px;
    }

    .subText {
      @include font(16px, 22px, #2C3C4D, 600);
    }
  }

  .nationalityStyle {
    // margin-bottom: 0;
  }

  :deep(.el-form-item) {
    display: block;
    width: 41%;
  }

  :deep(.el-form-item__label) {
    @include font(14px, 20px, #2C3C4D);
    margin-bottom: 10px;
  }

  :deep(.el-form-item__label::before) {
    margin-left: -10px
  }

  // 日期选择器
  :deep(.el-date-editor.el-input) {
    width: 100% !important;
    height: 44px;
  }

  :deep(.el-date-editor .el-input__wrapper) {
    width: 100% !important;
    height: 44px;
    padding-left: 15px;
  }

  // placeholder
  :deep(.el-input__inner) {
    &::placeholder {
      @include font(14px, 20px, #96A0AF);
    }
  }

  // 输入框
  :deep(.el-input) {
    height: 44px;
  }

  // 选择框
  :deep(.el-select) {
    width: 100%;
  }

  // 选择框下拉icon替换
  :deep(.el-select__caret) {
    img {
      width: 24px;
      height: 24px;
    }
  }

  // 单选框样式修改
  :deep(.el-radio__inner) {
    width: 16px;
    height: 16px;
    border-radius: 8px;
  }

  :deep(.el-radio__input.is-checked .el-radio__inner) {
    background-color: #fff;
  }

  :deep(.el-radio__inner::after) {
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background-color: #216FED;
  }

  // 姓名相关样式
  .nameLabel {
    width: 100%;
    @include font(14px, 20px, #2C3C4D);
    margin-bottom: 10px;
  }

  .nameIpt:before {
    content: "*";
    color: var(--el-color-danger);
    margin-left: -10px;
    margin-right: 4px;
    font-size: 14px;
    line-height: 44px;
    font-weight: 500;
  }
}

.center {
  width: 100%;
  @include flex(center, center);
  margin-top: 22px;
}
</style>
